<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
  msg: {
    type: String,
    default: "使用8个及以上的大小写字母、数字和符号",
  },
});

const emits = defineEmits(["update:modelValue", "change", "input"]);

const Grade = computed(() => {
  return {
    lvl1: checkPassword() > 0 ? 100 : 0,
    lvl2: checkPassword() > 1 ? 100 : 0,
    lvl3: checkPassword() > 2 ? 100 : 0,
    lvl4: checkPassword() > 3 ? 100 : 0,
  };
});

const checkPassword = () => {
  let lvl = 0;
  // 判断数字
  if (/[0-9]/.test(props.modelValue)) {
    lvl++;
  }
  // 判断有没有小写字母
  if (/[a-z]/.test(props.modelValue)) {
    lvl++;
  }
  // 判断有没有大学字母
  if (/[A-Z]/.test(props.modelValue)) {
    lvl++;
  }
  // 判断有没有特殊符号
  if (
    new RegExp(
      "[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]",
    ).test(props.modelValue) &&
    props.modelValue.length >= 8
  ) {
    lvl++;
  }
  // 使用弱密码直接等级为0
  if (!props.modelValue || props.modelValue.length < 8) {
    lvl = 0;
  }
  return lvl;
}
</script>

<template>
  <div class="w-full">
    <div class="password-input-box">
      <el-input v-model="props.modelValue" type="password" autocomplete="off" show-password show-word-limit
        :placeholder="placeholder" />
    </div>
    <div class="mt-2">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-progress :text-inside="true" :stroke-width="10" :percentage="Grade.lvl1" status="exception"
            :show-text="false" color="#F56C6C" />
        </el-col>
        <el-col :span="6">
          <el-progress :text-inside="true" :stroke-width="10" :percentage="Grade.lvl2" status="exception"
            :show-text="false" color="#E6A23C" />
        </el-col>
        <el-col :span="6">
          <el-progress :text-inside="true" :stroke-width="10" :percentage="Grade.lvl3" status="exception"
            :show-text="false" color="#909399" />
        </el-col>
        <el-col :span="6">
          <el-progress :text-inside="true" :stroke-width="10" :percentage="Grade.lvl4" status="exception"
            :show-text="false" color="#67C23A" />
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 10px; line-height: 20px; color: #c0c4cc">
      <span>{{ msg }}</span>
    </div>
  </div>
</template>
